const TodoInput = {
  template: `
    <div class="input">
      <input
        type="text"
        placeholder="请输入新待办事项"
        ref="inputRef"
        v-model.trim="inputValue"
        @keydown.enter="handleAdd"
      >
      <button class="add" @click="handleAdd">添加</button>
    </div>
  `,
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    // 添加新待办事项，向父组件传递文本框中输入的值
    handleAdd() {
      // 文本框自动获得焦点
      this.$refs.inputRef.focus()
      // 没有输入值，则停止调用
      if(!this.inputValue) {
        return
      }
      // 触发父组件中绑定的自定义 add 事件，传递数据
      this.$emit('add', this.inputValue)
      // 清空文本框
      this.inputValue = ''
    },
  },
}

export default TodoInput
